<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>云信科技金融服务平台可视化监控</title>
    <link rel="icon" href="public/images/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="public/images/favicon.ico" type="image/x-icon"/>
    <meta name="keywords" content="金融服务,供应链金融" />
    <meta name="description" content="云信科技金融服务平台可视化监控">
    <link href="public/css/reset.min.css" rel="stylesheet" type="text/css">
    <link href="public/css/index.css" rel="stylesheet" type="text/css">
    <link href="public/css/yx-credit.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="public/js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="public/js/yx-public.js"></script>
   <!-- <script type="text/javascript" src="public/js/echarts.min.js"></script>-->
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
    <script type="text/javascript" src="public/js/macarons.js"></script>
    <script type="text/javascript" src="public/js/china.js"></script>
</head>
<body>
<!--head-->
<div class="yx-head">
    <h1>云信科技金融服务平台可视化监控</h1>
</div>
<!--按钮-->
<div class="yx-btn-box  clear">
    <a href="enterprise.html" class="fr">二级页面按钮</a>
</div>
<div class="yx-content-box clear">
    <div class="yx-con-box-left">
        <div class="item-box marB">
            <div class="bg-left"></div>
            <div class="item-title">
                <div class="f16 etitle">平台监管总金额、授信总额度</div>
            </div>
            <div class="e-box-one">
                <p class="f14">平台监管总金额、授信总金额曲线图（单位：千万）</p>
                <div id="e-quota-box">1</div>
            </div>
            <div class="item-bottom">
                <p></p>
            </div>
        </div>
        <div class="item-box">
            <div class="bg-left"></div>
            <div class="item-title">
                <div class="f16 etitle">各行业监管总金额、授信总金额</div>
            </div>
            <div class="e-box-one padT0">
                <div id="industryNum-box">2</div>
            </div>
            <div class="item-bottom">
                <p></p>
            </div>
        </div>
    </div>
    <div class="yx-con-box-center">
        <div class="item-box item-city-box">
            <div class="bg-left"></div>
            <div class="item-title">
                <div class="f16 etitle">企业用户分布图</div>
            </div>
            <div class="e-box-one e-box-city">
                <div id="pub-user">2</div>
            </div>
            <div class="item-bottom">
                <p></p>
            </div>
        </div>
    </div>
    <div class="yx-con-box-right">
        <div class="item-box marB">
            <div class="bg-left"></div>
            <div class="item-title">
                <div class="f16 etitle">企业数量</div>
            </div>
            <div class="e-box-one">
                <p class="f14">企业数量折线图（单位：个）</p>
                <div id="enterprisesNum-box">2</div>
            </div>
            <div class="item-bottom">
                <p></p>
            </div>
        </div>
        <div class="item-box">
            <div class="bg-left"></div>
            <div class="item-title">
                <div class="f16 etitle">平台内行业分类占比</div>
            </div>
            <div class="e-box-one padT0">
                <div id="industry-box">2</div>
            </div>
            <div class="item-bottom">
                <p></p>
            </div>
        </div>
    </div>
</div>
<div class="yx-footer-box"></div>
<script type="text/javascript">

    /*平台监管总金额、授信总额度*/
    function initECharts () {
        var myECharts = echarts.init(document.getElementById('e-quota-box'));
        options ={
            title: {
                text: '',
                    left: '0',
                    top:'3',
                    textStyle: {
                    color: '#fff',
                        fontSize:'14',
                        fontWeight:'normal'
                }
            },
            xAxis: {
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',"10月","11月"],
                    boundaryGap: false,
                    axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                            color:'#fff'
                    }
                }
            },
            grid: {
                left: 10,
                    right: 10,
                    bottom: 0,
                    top: 40,
                    containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                    axisPointer: {
                    type: 'cross'
                },
                padding: [5, 10]
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                            color:'#fff'
                    }
                }
            },
            legend: {
                data: [
                    {name: '平台监管总金额', textStyle: {color: '#fff'}},
                    {name: '授信总金额', textStyle: {color: '#fff'}}
                ],
                    top:10,
                    right: 0,
                    selectedMode: false,
            },
            series: [{
                name: '平台监管总金额',
                itemStyle: {
                    normal: {
                        color: '#00ffff',
                        lineStyle: {
                            color: '#00ffff',
                            width: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#00ffff'},//00ffff
                                    {offset: 1, color: 'transparent'}//
                                ]
                            )
                        }
                    }
                },
                smooth: true,
                type: 'line',
                data:[8.51, 17.21, 24.72, 45.92, 60.65, 92.90, 125.61,145.43,166.59,201.77,230.81],
                animationDuration: 2800,
                animationEasing: 'cubicInOut'
            },
                {
                    name: '授信总金额',
                    smooth: true,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#ffce95',
                            lineStyle: {
                                color: '#ffce95',
                                width: 2
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#ffce95'},
                                        {offset: 1, color: 'transparent'}
                                    ]
                                )
                            }
                        }
                    },
                    data: [5.1, 10.53, 16.82, 29.39, 39.22, 59.65, 75.46,98.32,113.05,138.06,161.57],
                    animationDuration: 2800,
                    animationEasing: 'quadraticOut'
                }]
        }
        myECharts.setOption(options);
    };
    /*企业数量*/
    function enterprisesNumBox() {
        var myChartNumBox = echarts.init(document.getElementById('enterprisesNum-box'));
        optionNum = {
            backgroundColor: "#06013e",
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '10%',
                left: '2%',
                right: '2%',
                bottom: '8%',
                containLabel: true,
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: { //坐标轴轴线相关设置
                    show: true,
                    lineStyle: {
                        color: '#fff'//233e64
                    },
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#fff',//X轴字体颜色
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月','10月','11月'],
            }],
            yAxis: [{
                type: 'value',
                /*min: 0,
                max: 140,*/
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#233e64'//233e64
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'//233e64
                    },
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: '#fff',//y轴数值颜色

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                name: '企业数量',
                type: 'line',
                smooth: true, //是否平滑曲线显示
                symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                symbolSize: 4,
                color:'#fff',//点的颜色
                lineStyle: {
                    normal: {
                        color: "#ffcf97" // 线条颜色3deaff
                    }
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(255,207,151, 0.9)'
                        },
                            {
                                offset: 0.7,
                                color: 'rgba(255,207,151, 0.1)'
                            }
                        ], false),

                        shadowColor: 'rgba(255,207,151, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data: [45, 92, 148, 205, 269, 357, 448, 550, 633,752,910]
            }]
        };

        myChartNumBox.setOption(optionNum);
    };
    /*平台内行业分类占比*/
    function industryBox() {
        var myIndustry = echarts.init(document.getElementById('industry-box'));
        options = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} :{d}%'
            },
            grid: {
                top: '0',
                left: '0',
                right: '0',
                bottom: '0',
                containLabel: true,
            },
            legend: {
                orient: 'horizontal',
               /* x: 'center',
                y: 'bottom',*/
                bottom:0,
                left: 'center',
                data: [ '纺织行业','化工行业','金属加工业','批发零售业','汽车制造业','设备制造业','橡胶和塑料制品业'],
                textStyle:{
                    color:'#fff'
                },
                itemWidth: 10,
                itemHeight: 10,
                selectedMode: false,
            },
            calculable: true,
            series: [
                {
                    name: '平台内行业分类占比',
                    type: 'pie',
                    // roseType: 'radius',
                    radius: ['40%', '60%'],
                    center: ['50%', '48%'],
                    data:[
                        { value: '12', name: '纺织行业' },
                        { value: '30', name: '化工行业' },
                        { value: '4', name: '金属加工业' },
                        { value: '9', name: '批发零售业' },
                        { value: '11', name:'汽车制造业'},
                        { value: '11', name: '设备制造业' },
                        { value: '24', name: '橡胶和塑料制品业'}
                    ],
                    color: ['#f97f34', '#3b52de', '#fcb634', '#dd41d0', '#0037e9','#36c985','#dd4171'],
                    label: {
                        formatter: '{d}%',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    labelLine: {
                        show: false,
                        length:0,
                        color:'#fff',
                        lineStyle:{
                            color:'#fff'
                        }
                    },
                    animationEasing: 'cubicInOut',
                    animationDuration: 2600
                }
            ]
        };
        myIndustry.setOption(options);
    };

    /*各行业监管总金额、授信总金额*/
    function industryNumber() {
        var myEChartsIndustry = echarts.init(document.getElementById('industryNum-box'));
        options={
            title: {
                text: '各行业金额柱状图 （单位：千万）',
                left: 0,
                top:'15',
                textStyle: {
                    color: '#fff',
                    fontSize:14,
                    fontWeight:'normal'
                }
            },
            legend: {
                data: [
                    {name: '平台监管总额', textStyle: {color: '#fff'}},
                    {name: '授信总金额', textStyle: {color: '#fff'}}
                ],
                top:40,
                right: 0,
                textStyle:{
                    color:'#fff'
                },
                itemWidth: 10,
                itemHeight: 10,
                selectedMode: false,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top:'90',
                left: '2%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            dataset: {
                source:[
                    ['纺织行业', 29.17, 19.51],
                    ['化工行业', 69.15, 50.15],
                    ['金属加工业', 8.19, 5.25],
                    ['汽车制造业', 20.63, 13.70],
                    ['设备制造业', 25.99, 16.44],
                    ['橡胶和塑料品业', 56.30, 40.11]
                    // ['汇总', 230.81, 116.34]
                ]
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color:'#fff'
                    }
                },
                axisLabel:{

                }
            }],
            yAxis: [{
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color:'#fff'
                    }
                }
            }],
            series: [ {
                name:'平台监管总额',
                type: 'bar',
                barWidth: '20%',
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#01ffff'},
                        {offset: 1, color: '#1f6bff'}
                    ]
                ),
                itemStyle: {
                    barBorderRadius: 10
                },
            },
                {
                    name:'授信总金额',
                    type: 'bar',
                    barWidth: '20%',
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#d34170'},
                            {offset: 1, color: '#c155f9'}
                        ]
                    ),
                    itemStyle: {
                        barBorderRadius: 10
                    },
                }]
        };
        myEChartsIndustry.setOption(options);
    };

    initECharts();
    enterprisesNumBox();
    industryBox();
    industryNumber();
    chinaMap();

    $(window).resize(function () {
        initECharts();
        enterprisesNumBox();
        industryBox();
        industryNumber();
        chinaMap();
    });
    /*企业用户分布图*/
    /*城市数据*/
    function chinaMap() {
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('pub-user'));

        var data =[
                {name:	'东营'	,value:	43},
                {name:	'威海'	,value:	30},
                {name:	'滨州'	,value:	40},
                {name:	'宿迁'	,value:	12},
                {name:	'广州'	,value:	22},
                {name:	'上海'	,value:	27},
                {name:	'南京'	,value:	22},
                {name:	'宁波'	,value:	24},
                {name:	'泰安'	,value:	34},
                {name:	'青岛'	,value:	37},
                {name:	'绍兴'	,value:	15},
                {name:	'淄博'	,value:	38},
                {name:	'潍坊'	,value:	29},
                {name:	'济南'	,value:	32},
                {name:	'聊城'	,value:	21},
                {name:	'无锡'	,value:	16},
                {name:	'深圳'	,value:	14},
                {name:	'杭州'	,value:	13},
                {name:	'自贡'	,value:	3},
                {name:	'合肥'	,value:	9},
                {name:	'马鞍山',value:	3},
                {name:	'北京'	,value:	15},
                {name:	'徐州'	,value:	15},
                {name:	'菏泽'	,value:	31},
                {name:	'淮安'	,value:	5},
                {name:	'黄山'	,value:	7},
                {name:	'金华'	,value:	8},
                {name:	'安庆'	,value:	9},
                {name:	'苏州'	,value:	24},
                {name:	'海宁'	,value:	13},
                {name:	'泰州'	,value:	12},
                {name:	'天津'	,value:	22},
                {name:	'济宁'	,value:	28},
                {name:	'运城'	,value:	8},
                {name:	'吕梁'	,value:	5},
                {name:	'许昌'	,value:	3},
                {name:	'张家口',value:13},
                {name:	'邢台'	,value:	7},
                {name:	'新乡'	,value:	8},
                {name:	'太原'	,value:	14},
                {name:	'临沂'	,value:	29},
                {name:	'盐城'	,value:	9},
                {name:	'烟台'	,value:	21},
                {name:	'大连'	,value:	14},
                {name:	'舟山'	,value:	6},
                {name:	'福州'	,value:	8},
                {name:	'唐山'	,value:	10},
                {name:	'保定'	,value:	7},
                {name:	'石家庄',value:	7},
                {name:	'乌鲁木齐',value:5},
                {name:	'淮北'	,value:	2},
                {name:	'南通'	,value:	10},
                {name:	'沧州'	,value:	15},
                {name:	'哈尔滨',value:	8},
                {name:	'长春'	,value:	7},
                {name:	'长沙'	,value:	10},
                {name:	'武汉'	,value:	11},
                {name:	'成都'	,value:	9},
                {name: '茌平·鲁西新金融中心', vlaue: 200}
        ];

        var geoCoordMap ={
            '东营':[118.39,37.26],
            '威海':[122.06,37.30],
            '滨州':[117.58,37.22],
            '宿迁':[118.16,33.57],
            '广州':	[113.15,23.07],
            '上海':	[121.28,31.13],
            '南京':	[118.47,32.03],
            '宁波':[121.32,29.52],
            '泰安':[117.04,36.11],
            '青岛':[120.22,36.03],
            '绍兴':[120.34,30.01],
            '淄博':[118.02,36.48],
            '潍坊':[119.09,36.42],
            '济南':	[116.98,36.67],
            '聊城':	[115.58,36.27],
            '无锡':	[120.18,31.29],
            '深圳':[114.03,22.32],
            '杭州':[120.09,30.16],
            '自贡':[104.46,29.20],
            '合肥':[117.13,31.49],
            '马鞍山':[118.30,31.40],
            '北京':	[116.24,39.54],
            '徐州':	[117.16,34.12],
            '菏泽':[115.28,35.14],
            '淮安':[119.00,33.36],
            '黄山':	[118.10,30.07],
            '金华':[119.38,29.04],
            '安庆':	[117.03,30.32],
            '苏州':	[120.34,31.18],
            '海宁':	[120.40,30.30],
            '泰州':[119.55,32.27],
            '天津':	[117.11,39.05],
            '济宁':[116.34,35.24],
            '运城':	[111.04,35.01],
            '吕梁':[111.08,37.31],
            '许昌':[113.50,34.02],
            '张家口':[114.52,40.49],
            '邢台'	:[114.29,37.04],
            '新乡':[113.55,35.18],
            '太原':[112.32,37.52],
            '临沂':	[118.21,35.06],
            '盐城':	[120.09 ,33.21],
            '烟台':[121.26,37.27],
            '大连':[121.36,38.54],
            '舟山':[122.12,29.59],
            '福州':[119.17,26.04],
            '唐山':[118.10 ,39.37],
            '保定':	[115.27,38.52],
            '石家庄':[114.30,38.02],
            '乌鲁木齐':[87.36,43.49],
            '淮北':	[116.49,33.59],
            '南通':[120.53,31.58],
            '沧州':	[116.49,38.18],
            '绵阳':	[104.40,31.28],
            '哈尔滨':[126.31,45.48],
            '长春':	[125.19,43.48],
            '长沙':	[112.56,28.13],
            '武汉':	[114.17,30.35],
            '成都':	[104.03,30.34],
            '茌平·鲁西新金融中心': [116.26, 36.58]
        };
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name]
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    })
                }
            };
            return res;
        };
        var optionMap = {
         /*    title: {
               text: "当前用户总量",
               left: '0',
               top:'0',
               textStyle: {
                 color: '#fff',
                 fontSize:'14',
                   fontWeight:"normal"
               }
            },*/
            backgroundColor: 'transparent',
         /*   tooltip : {
                trigger: 'item'
            },*/
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.seriesName+'<br/>'+ params.name + ' : ' + params.value[2];
                }
            },
            //配置属性
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'left',
                data: [
                    {name:'茌平·鲁西新金融中心',icon:'image://http://test1.huidajinfu.com/static/img/pin2.png'},
                    {name:'用户分布图',icon:'image://http://test1.huidajinfu.com/static/img/pin3.png'}],
                textStyle: {
                    color: '#fff'
                },
                selectedMode: false,
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#0c5be2',
                        borderColor: '#1cc4d2'
                    },
                    emphasis: {
                        //areaColor: '#1cc4d2'
                        areaColor: '#0c5be2',
                    }
                }
            },
            series: [
                {
                    name: '用户分布图',
                    type: 'scatter',
                    symbol: 'pin',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    //symbolSize:10,
                    // symbolSize: function (val) {
                    //   return val[1] /10
                    // },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ffbd70'
                        }
                    },
                },
                {
                    name: '用户分布前五',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value
                    }).slice(0, 5)),
                    symbolSize:20,
                    //symbolSize: [20,16],
                    //symbolSize: function (val) {
                    //  return val[2] /10
                    //},
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ffbd70',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1,
                },
                {
                    name: '茌平·鲁西新金融中心',
                    type: 'scatter',
                    //type: 'effectScatter',
                    coordinateSystem: 'geo',
                    symbol: 'image://http://test1.huidajinfu.com/static/img/pin.png',
                    data: convertData(data.slice(-1)),
                    symbolSize: [120,70],
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    tooltip:{
                        show:false
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1,
                }
            ]
        };


        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);
    };
</script>
</body>
</html>